<script setup>
import {computed, reactive, ref, shallowRef} from 'vue'
import {javascript} from '@codemirror/lang-javascript'
import {java} from '@codemirror/lang-java'
import {vue} from '@codemirror/lang-vue'
import {sql} from '@codemirror/lang-sql'
import {xml} from '@codemirror/lang-xml'
import {html} from '@codemirror/lang-html'
import {json} from '@codemirror/lang-json'
import {markdown} from '@codemirror/lang-markdown'
import {oneDark} from '@codemirror/theme-one-dark'
import {Codemirror} from '@/components/codemirror'
import {previewGeneratorApi} from '@/api/generator/generator'

const isshow = ref(false)
const list = ref([])
const options = [
  {
    value: 'red',
    label: 'red',
  },
  {
    value: 'black',
    label: 'black',
  },
  {
    value: 'yellow',
    label: 'yellow',
  },
  {
    value: 'lawngreen',
    label: 'lawngreen',
  },
  {
    value: 'blue',
    label: 'blue',
  },
]
const options1 = ['java', 'vue', 'xml', 'sql', 'javascript', 'html', 'json', 'markdown']

const themes = {oneDark}
const languages = {
  javascript: javascript(),
  html: html(),
  json: json(),
  markdown: markdown(),
  java: java(),
  sql: sql(),
  vue: vue(),
  xml: xml(),
  ts: javascript(),
  js: javascript(),
}

const consoleLog = console.log
const code = shallowRef(`console.log('Hello World')`)
const view = shallowRef()
const config = reactive({
  disabled: false,
  indentWithTab: true,
  tabSize: 4,
  autofocus: true,
  placeholder: 'input...',
  backgroundColor: 'red',
  language: 'java',
  theme: 'oneDark',
  phrases: 'zh-CN'
})

const handleReady = (payload) => {
  //console.log('handleReady payload:', payload)
}

const extensions = computed(() => {
  const result = []
  result.push(languages[config.language])
  if (themes[config.theme]) {
    result.push(themes[config.theme])
  }
  return result
})

function handleChange(index) {
  //config.language = list.value[index].type
}

function init(id) {
  isshow.value = true
  previewGeneratorApi(id).then((res) => {
    list.value = res.data
  })
}

defineExpose({
  init
})
</script>

<template>
  <el-dialog v-model="isshow" width="75vw">
    <el-row class="toolbar" width="100vw">
      <el-col :span="2">
        <el-form-item label="禁用">
          <el-switch v-model="config.disabled"/>
        </el-form-item>
      </el-col>
      <el-col :span="2">
        <el-form-item label="自动对焦">
          <el-switch v-model="config.autofocus"/>
        </el-form-item>
      </el-col>
      <el-col :span="2">
        <el-form-item label="缩进">
          <el-switch v-model="config.indentWithTab"/>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="制表符">
          <el-slider v-model="config.tabSize" :min="2" :max="10" :step="2" show-stops/>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="背景色">
          <el-select v-model="config.backgroundColor" class="m-2" placeholder="Select">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="语言">
          <el-select v-model="config.language" class="m-2" placeholder="Select">
            <el-option
                v-for="item in options1"
                :key="item"
                :label="item"
                :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>


      <!--        <p>-->
      <!--          <label for="theme">theme:</label>-->
      <!--          <select name="theme" id="theme" v-model="config.theme">-->
      <!--            <option :value="option" :key="option" v-for="option in ['default', 'oneDark']">-->
      <!--              {{ option }}-->
      <!--            </option>-->
      <!--          </select>-->
      <!--        </p>-->
      <!--        <p>-->
      <!--          <label for="phrases">phrases:</label>-->
      <!--          <select name="phrases" id="phrases" v-model="config.phrases">-->
      <!--            <option :value="option" :key="option" v-for="option in ['en-us', 'de-de']">-->
      <!--              {{ option }}-->
      <!--            </option>-->
      <!--          </select>-->
      <!--        </p>-->
    </el-row>
    <el-row>
      <el-tabs type="border-card" style="width: 73vw" @tab-change="handleChange">
        <el-tab-pane v-for="item in list" :label="item.name">
          <template #default>
            <div class="content">
              <codemirror
                  class="codemirror"
                  ref="cm"
                  :autofocus="config.autofocus"
                  :placeholder="config.placeholder"
                  :indentWithTab="config.indentWithTab"
                  :tabSize="config.tabSize"
                  :disabled="config.disabled"
                  :style="{ backgroundColor: config.backgroundColor }"
                  :extensions="extensions"
                  v-model="item.content"
                  @ready="handleReady"
                  @change="consoleLog('change', $event)"
                  @focus="consoleLog('focus', $event)"
                  @blur="consoleLog('blur', $event)"
              />
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </el-dialog>
</template>

<style lang="scss">


.toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;

  .state {
    margin: 2rem 0;
    margin-right: 2rem;
    padding: 2em;
    border: 1px solid #ccc;
  }
}

.content {
  display: flex;
  width: 100%;
  justify-content: left;

  .code {
    overflow: scroll;
  }

  .code,
  .codemirror .cm-editor {
    width: 72vw;
    height: 50vh;
    border: 1px solid #ddd;
  }
}
</style>
